import { Spin } from 'antd';
import { useEffect, useState } from 'react';
import { useModel } from 'umi';
import styles from './index.less';

const FullScreen = () => {
  const [success, setSuccess] = useState(true);
  const [loading, setLoading] = useState(true);
  const { initialState, setInitialState } = useModel('@@initialState');
  const dpUrl = 'https://charts.thingjs.com/kunpeng/preview/publish/6vEBf2';

  const fetchUserInfo = async () => {
    const userInfo = (await initialState?.fetchUserInfo?.()) as UserInfo;
    if (userInfo) {
      await setInitialState({
        ...initialState,
        currentUser: userInfo,
      });
      setLoading(false);
      setSuccess(true);
    } else {
      setLoading(false);
      setSuccess(false);
    }
  };

  console.log(initialState);
  //相当于声明周期
  useEffect(
    () => {
      setTimeout(() => {
        document.title = '大屏数据';
      }, 1000);
      fetchUserInfo();
      return () => {}; //类似destroy 要执行的东西
    },
    [] /*什么都不传，只会执行一次，传变量，会在变量变化的时候执行里面的函数*/,
  );

  return (
    <Spin spinning={loading} delay={500}>
      <div className={styles.container}>
        <iframe
          hidden={!success}
          id="iframeDiagram"
          allowFullScreen
          frameBorder="0"
          style={{ width: '100%', height: '100%' }}
          src={dpUrl}
        />
      </div>
    </Spin>
  );
};

export default FullScreen;
